<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="page" uri="http://www.yf1701.com/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/order/orderSecond.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {

		//点击某个
		$("[service_id],[type_id],[brand_id],[price],[all]")
				.click(
						function() {
							if ($(this).hasClass("other_selected")) {
								if($(this).text()!="全部"){
									$(this).removeClass("other_selected");
								}
							} else {
								//alert($(this).text());
								if ($(this).text()=="全部") {
									var fu = $(this).parent().parent().parent();
									//修改"全部"的颜色
									$(this).addClass("other_selected");
									//去掉其余的颜色
									if (fu.hasClass("div_middle_cartypelist2")) {
										$("[type_id]").each(function() {
											$(this).removeClass("other_selected");
										})
									} else if (fu.hasClass("div_middle_carlist3")) {
										$("[brand_id]").each(function() {
											$(this).removeClass("other_selected");
										})
									} else if (fu.hasClass("div_middle_carlist4")) {
										$("[price]").each(function() {
											alert($(this).attr("price"));
											$(this).removeClass("other_selected");
										})
									}
								}
								$(this).addClass("other_selected");
								//判断点击了哪个筛选项
								if ($(this).attr("service_id")) {

								} else if ($(this).attr("type_id")) {
									//点击车型
									//判断是否已经全选
									//遍历车型
									var all;
									$("[type_id]").each(
											function() {
												all = $(this).hasClass(
														"other_selected");
												return all;
											})
									if (all) {
										//把车型字体颜色修改，给全部添加字体颜色
										$("[type_id]").each(
												function() {
													$(this).removeClass(
															"other_selected");
												})
										$(".div_middle_cartypelist2 .all")
												.addClass("other_selected");
									} else {
										//修改全部的字体颜色
										$(".div_middle_cartypelist2 .all")
												.removeClass("other_selected");
									}

								} else if ($(this).attr("brand_id")) {
									//点击品牌
									//判断是否全选
									//遍历品牌
									var all;
									$("[brand_id]").each(
											function() {
												all = $(this).hasClass(
														"other_selected");
												return all;
											})
									if (all) {
										//把品牌颜色修改。给全部添加字体颜色
										$("[brand_id]").each(
												function() {
													$(this).removeClass(
															"other_selected");
												});
										$(".div_middle_carlist3 .all")
												.addClass("other_selected");

									} else {
										//修改全部的字体颜色
										$(".div_middle_carlist3 .all")
												.removeClass("other_selected");
									}

								} else {
									//点击价格
									//判断是否全选
									//遍历价格
									var all;
									$("[price]").each(
											function() {
												all = $(this).hasClass(
														"other_selected");
												return all;
											})
									if (all) {
										//把品牌颜色修改。给全部添加字体颜色
										$("[price]").each(
												function() {
													$(this).removeClass(
															"other_selected");
												});
										$(".div_middle_carlist4 .all")
												.addClass("other_selected");

									} else {
										//修改全部的字体颜色
										$(".div_middle_carlist4 .all")
												.removeClass("other_selected");
									}
								}
							}
							//新建参数
							var service_id = "";
							var type_id = "";
							var brand_id = "";
							var price = "";
							//获取所有已选择的筛选项
							var list = $(".other_selected");
							list.each(function() {
								if ($(this).attr("service_id")) {
									service_id += $(this).attr("service_id")
											+ ",";
								} else if ($(this).hasClass("all")) {
									//判断是哪个全部
									if ($(this).hasClass("type")) {
										type_id = ""
									} else if ($(this).hasClass("brand")) {
										brand_id = "";
									} else if ($(this).hasClass("price")) {
										price = "x";
									}
								} else if ($(this).attr("type_id")) {
									type_id += $(this).attr("type_id") + ",";
								} else if ($(this).attr("brand_id")) {
									brand_id += $(this).attr("brand_id") + ",";
								} else if ($(this).attr("price")) {
									price += $(this).attr("price") + ",";
								}
							})
							//去掉最后的逗号
							service_id = service_id.substring(0,
									service_id.length - 1);
							type_id = type_id.substring(0, type_id.length - 1);
							brand_id = brand_id.substring(0,
									brand_id.length - 1);
							price = price.substring(0, price.length - 1);
							//拼接参数
							var data = "service_id=" + service_id + "&type_id="
									+ type_id + "&brand_id=" + brand_id
									+ "&price=" + price;
							//检测参数是否错误
							//alert(data);
							$.get("selectcar",//url
							{
								service_id : service_id,
								type_id : type_id,
								brand_id : brand_id,
								price : price
							},//参数
							function(data,success){
								var carList = data;
								//清除车辆框
								$(".div_car_details").html("");
								var str = "";
								for (var i = 0; i < carList.length; i++) {
									//获取车对象
									var car = carList[i];
									//新建节点
									str =  "<div style='width:830px;height:136px'>"
									+ 			"<div class='div_car_img' style='float:left'><img src='"+car.img1+"' style='width:200px;height:130px'></div>"
									+			"<div class='div_car_detailscontent'>"
									+				"<a href='orderThird?car_id="+car.id+"'><span class='div_car_detailscontentspan'>"+car.name+"</span></a>"
									+			"</div>"
									+			"<ul class='div_car_detailscontent2'>"
									+				"<li class='div_car_detailscontent2li'><div style='margin-left:20px'>"+car.time+"</div></li>"
									+				"<li style='height:82px'><div class='div_car_drop_downbox1'><span style='font-size:22px;'>￥"+car.price+"</span>/预交定金</div></li>"
									+				"<li class='div_car_detailscontent2li2'><div class='div_carorderbtn'><a href='orderThird?car_id="+car.id+"'><span style='color:white'>预订</span></a></div></li>"
									+			"</ul>"
									+ 		"</div>";
									//追加div
									$(".div_car_details").append(str);
								}
								//暂无分页
								var fenye = "<div class='div_car_listbox2'>暂无分页</div>";
								$(".div_car_details").append(fenye);
								
								
								//添加分页框框
								//var fenye = " <div class='div_car_listbox2'> "
								//		+	"  < page:page pages='${data.pages}' total='${data.total}' url='selectcar' currpage='${data.currpage}' pagesize='${data.pagesize}' />";
								//		+  	" </div> ";
								
							},//callback
							"json"//type
							)
						})
	})
</script>
<title>选车列表</title>
<style type="text/css">
/*服务类型、车型、品牌、价格选中样式*/
.other_selected {
	color: orangered;
}
</style>
</head>
<body>

	<!-- 引入头部 -->
	<jsp:include page="../public/header.jsp"></jsp:include>
	<!-- 引导栏 -->
	<div class="clear zhongjian_a">
		<ul>
			<li><span> 1 </span>
				<p>预订车辆</p> <br /> <font> 提前为您预留 </font></li>
			<li><span> 2 </span>
				<p>签订合同</p> <br /> <font> 双方共同验车 </font></li>
			<li><span> 3 </span>
				<p>开心旅途</p> <br /> <font> 一路为您保驾护航 </font></li>
			<li><span> 4 </span>
				<p>退还车辆</p> <br /> <font> 完成租车使用 </font></li>
		</ul>
	</div>

	<!--
        	中间的盒子
        -->
	<div class="div_middle">
		<div class="div_middle_cartype">
			<div class="div_middle_cartypelist1">
				<c:forEach items="${serviceList}" var="service">
					<a class="cartypelist_t" service_id="${service.id}">${service.name}</a>
				</c:forEach>
			</div>

			<div class="div_middle_cartypelist2">
				<div class="cartypelist2_listdiv">车型</div>

				<ul class="cartypelist2_list">
					<li><a all="All" class="type all other_selected">全部</a></li>
					<c:forEach items="${typeList}" var="type">
						<li><a type_id="${type.id}">${type.name}</a></li>
					</c:forEach>
				</ul>

			</div>
			<!-- 品牌 -->
			<div class="div_middle_carlist3">
				<label style="margin: 40px 10px; float: left;">品牌</label>
				<ul>
					<li><a all="All" class="brand all other_selected">全部</a></li>
					<c:forEach items="${brandList}" var="brand">
						<li><a brand_id="${brand.id}">${brand.name}</a></li>
					</c:forEach>

				</ul>
			</div>
			<!-- 价格 -->
			<div class="div_middle_carlist4">
				<label class="div_middle_carlist4_label">价格</label>
				<ul>
					<li><a all="All" class="price all other_selected">全部</a></li>
					<li><a price="0-300">0-300</a></li>
					<li><a price="300-500">300-500</a></li>
					<li><a price="500-1000">500-1000</a></li>
					<li><a price="1000-2000">1000-2000</a></li>
					<li><a price="2000-9999">2000以上</a></li>
				</ul>
			</div>
		</div>
		<!--
                	汽车列表
               -->
		<div class="div_middle_carlist">

			<div style="width: 830px; height: 45px;">

				<div class="div_middle_tab">默认排序</div>
				<div class="div_middle_tab">按租金</div>
				<div class="div_middle_tab">按销量</div>

			</div>

			<!--
            	汽车列表框
            -->
			<div class="div_car_details">

				<!-- 从数据库读取车的列表 -->
				<c:forEach items="${carList.data}" var="car">
					<div style="width: 830px; height: 136px;">
						<!--
                    	放汽车图片的盒子
                    -->
						<div class="div_car_image">
							<img src="${car.img1}" style="width: 200px; height: 130px;" />
						</div>
						<!--
                    	放汽车详情的盒子
                    -->
						<div class="div_car_detailscontent">
							<a href="orderThird?car_id=${car.id}"><span class="div_car_detailscontentspan">${car.name}</span></a>
						</div>
						<!--
                    	汽车详情下面的预交定金
                    -->
						<ul class="div_car_detailscontent2">
							<li class="div_car_detailscontent2li">
								<div style="margin-left: 20px;">${car.time}</div>
							</li>
							<li style="height: 82px;">
								<div class="div_car_drop_downbox1">
									<span style="font-size: 22px;">￥${car.price}</span>/预交定金
								</div>
							</li>
							<li class="div_car_detailscontent2li2">
								<div class="div_carorderbtn">
									<a href="orderThird?car_id=${car.id}"><span style="color:white">预订</span></a>
								</div>
							</li>
						</ul>
					</div>
				</c:forEach>

				<div class="div_car_listbox2">
				
					<!-- <span style="float: left;">分页暂无</span> -->
					<page:page  pages="${carList.pages }" total="${carList.total }" url="fastorder" currpage="${carList.currpage }" pagesize="${carList.pagesize }" />
				</div>

			</div>

		</div>

	</div>
	<!-- 引入尾部 -->
	<jsp:include page="../public/footer.jsp"></jsp:include>
</body>
</html>